/*
 * @Author: yangzonglong
 * @Date: 2021-07-09 13:20:24
 * @version: v1.0.0
 * @Descripttion: table input 控制器
 * @LastEditors: yangzonglong
 * @LastEditTime: 2023-05-26 14:32:01
 * @Auditor:
 */
import React, { useCallback } from 'react';
import { Form, InputNumber, Select, Input } from 'antd';
import CommonController from '../CommonController';
import update from 'immutability-helper';
import CodeMirror from './../../codeMirror/CodeMirror';

import { IProps } from '../config';

const FormItem = Form.Item, Option = Select.Option;
export const fileDataSource = ['.png', '.jpg', '.jpeg', '.gif', '.pdf', '.xls', '.xlsx', '.zip', '.rar', '.txt', '.docx', '.doc', '.pptx', '.ppt'];
const UploadController = ({
  tableProps,
  required,
  originalIndex,
  columns,
  dataIndex,
  width,
  maxCount,
  title,
  titleEn,
  print,
  accept,
  disabled,
  exportFlag,
  setCurColumn,
  changeColumnOptions,
  changeControlProps,
  fontSize,
  fontWeight,
  backgroundColor,
  color,
  customizeStyleFlag,
  uploadUrl,
  downloadUrl,
  downloadScript
}: IProps) => {
  const onChangeColumnOptions = useCallback(
    (e: any, k: string, isChecked?: boolean) => {
      e = isChecked ? e.target.checked : (typeof e === 'number' || typeof e === 'string' ? e : e.target.value);
      changeColumnOptions(k, e, originalIndex);
    },
    [changeColumnOptions, originalIndex]
  );

  const _changeControlProps = useCallback(
    (e: any, k: string, isChecked?: boolean) => {
      e = isChecked ? e.target.checked : (typeof e === 'number' || typeof e === 'string' ? e : e.target.value);
      changeControlProps(
        'tableProps',
        {
          ...tableProps,
          columns: update(columns!, {
            [originalIndex!]: {
              [k]: {
                $set: e,
              },
            },
          }),
        },
        true
      );

      setCurColumn?.({ ...columns![originalIndex!], originalIndex, [k]: e });
    },
    [changeControlProps, columns, originalIndex, setCurColumn, tableProps]
  );

  return (
    <CommonController
      onChangeControlProps={_changeControlProps}
      onChangeColumnOptions={onChangeColumnOptions}
      {...{ title, titleEn, dataIndex, width, required, print, disabled, exportFlag, fontSize, fontWeight, backgroundColor, color, customizeStyleFlag }}
    >
      <FormItem label="限制文件个数">
        <InputNumber value={maxCount} onChange={e => onChangeColumnOptions(e, 'maxCount')} />
      </FormItem>

      <FormItem label="限制文件类型">
        <Select onChange={(e) => onChangeColumnOptions(e.join(','), 'accept')} value={accept ? accept.split(',') : []} showArrow mode="multiple">
          {fileDataSource.map((item) => (
            <Option key={item} value={item}>
              {item}
            </Option>
          ))}
        </Select>
      </FormItem>

      <FormItem name='uploadUrl' label="上传文件地址">
        <Input onChange={e => onChangeColumnOptions(e, 'uploadUrl')} defaultValue={uploadUrl} />
      </FormItem>

      <FormItem name='downloadUrl' label="下载文件地址">
        <Input onChange={e => onChangeColumnOptions(e, 'downloadUrl')} defaultValue={downloadUrl} />
      </FormItem>

      <CodeMirror
        label='自定义下载脚本'
        scriptText={downloadScript}
        change={(e: string) => onChangeColumnOptions(e, 'downloadScript')} />
    </CommonController>
  );
};

export default UploadController;
